<template>
	<view class="copyright">
		<view class="info" v-if="company">
			<view class="paragraph" v-if="company.web_company">{{company.web_company}} 版权所有</view>
			<view class="paragraph" v-if="company.technical_support">{{company.technical_support}} 技术支持</view>

			<!-- #ifdef H5 -->
			<view class="paragraph" @click="openUrl('https://beian.miit.gov.cn')" v-if="company.web_record_number">
				{{company.web_record_number}}
			</view>
			<!-- #endif -->

			<!-- #ifdef MP -->
			<view class="paragraph" @click="openUrl('https://beian.miit.gov.cn')" v-if="company.mini_record_number">
				{{company.mini_record_number}}
			</view>
			<!-- #endif -->

			<!-- #ifdef APP -->
			<view class="paragraph" @click="openUrl('https://beian.miit.gov.cn')" v-if="company.app_record_number">
				{{company.app_record_number}}
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
	} from 'vue';

	const state = reactive({
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		company: cache.get('systemInfo'),
	});

	function openUrl(url) {
		location.href = url;
	}

	const {
		themeColor,
		imgHost,
		company,
	} = toRefs(state);
</script>

<style lang="scss">
	.copyright {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		@include f-center(column);
		padding: $m48;

		.info {
			margin-top: $m20;
			opacity: 0.8;

			.paragraph {
				color: $tips-color;
				text-align: center;
			}
		}
	}
</style>